<template>
  <div>
    <el-form
      :model="form"
      ref="form"
      label-width="160px"
      class="ccui-form"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="补充协议编号：">
            <el-input
              v-model="form.protocolCode"
              placeholder="系统自动生成"
              clearable
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="补充协议名称：" prop="protocolName">
            <el-input
              v-model="form.protocolName"
              placeholder="请输入补充协议名称"
              clearable
              maxLength="300"
              @blur="formProtocolName('protocolName')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="协议说明：" :title="form.protocolDesc">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入协议说明"
              v-model="form.protocolDesc"
              maxlength="300"
              show-word-limit
              class="remarkClass"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <uploadInfo isTab v-model="attachment" :state="agreementInfo.state" />
  </div>
</template>
<script>
import validators from "@/basa/utils/validators";
import publicComponent from "@/basa/components/public";
export default {
  name: "agreementInfo",
  props: {
    agreementInfo: {
      type: Object,
      detail: () => {}
    }
  },
  components: {
    uploadInfo: publicComponent.uploadInfo
  },
  data() {
    return {
      form: {
        protocolName: "",
        protocolDesc: ""
      },
      attachment: [], //上传附件
      uploadIds: [], //上传附件id
      rules: {
        protocolCode: [
          { required: true, message: "请输入补充协议编号", trigger: "blur" },
          {
            validator: validators.numAndLetterAndCross,
            message: "输入合同编号只能字母、数字、横杠、下划线",
            trigger: "blur"
          }
        ],
        protocolName: [
          { required: true, message: "请输入补充协议名称", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const { state, smpProtocol, protocolConcFiles } = this.agreementInfo;
      if (state === "edit") {
        this.form = smpProtocol;
        this.attachment = protocolConcFiles;
      }
    },

    // 提交验证
    handleSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // 处理附件数据
            const fileReqBOS = this.attachment.length
              ? this.attachment.map((n, i) => ({
                  sn: i,
                  createTime: n.createTime,
                  fileDesc: n.fileDesc,
                  fileInfoId: n.uploadId || n.fileInfoId
                }))
              : [];

            // 合并表单和附件
            const obj = {
              smpProtocolBO: this.form,
              fileReqBOS
            };

            resolve(obj);
          } else {
            reject("seventh");
          }
        });
      });
    },
    formProtocolName(key) {
      this.$set(this.form, key, this.form[key].replace(/(^\s*)|(\s*)$/g, ""));
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .is-disabled {
  width: 260px;
}
/deep/ .el-input {
  width: 260px;
}
/deep/ .el-button--single-number {
  width: 70px;
  margin-left: 10px;
  padding: 0 9px;
}
.remarkClass {
  width: calc(50% + 340px);
  margin-bottom: 20px;
}
</style>
